<template>
  <div>
    <h2>YangSu Mobile (Wap)</h2>
    <div class="content-text">
      <p>Yangsu 移动客户端是基于 <a href="https://vuejs.org/">Vue3</a> 和
        <a href="https://github.com/vant-ui/vant">vant</a> 库的实现！
      </p>
      <p>代码仍在开发中，敬请期待！</p>
    </div>
    <div class="jc-footer">
      <p>客户端版本 {{ envData?.version }}/{{ envData?.release }}</p>
      <p v-if="!!envData?.server">
        服务版本 {{ envData?.server.version }}/{{ envData?.server.release }} ({{
          envData?.server.code }})
      </p>
      <p v-if="!!envData?.server">
        Power By @{{ envData?.server.author }}/{{ envData?.server.email }}
      </p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import type { Ref } from "vue";
import { Wap } from "../../../common/wap";

// 环境变量版本信息
const envData: Ref<SystemInfo | null> = ref(null);

Wap.systemInfo((result) => {
  envData.value = result;
});

</script>

<style scoped>
h2 {
  /* padding-left: 10px; */
  text-align: center;
}

div.content-text {
  padding: 4px;
  min-height: calc(100vh - 278px);
}

#app h2 {
  padding-top: 20px;
}

/* 动画，控制背景 background-position */
@keyframes gradientBG {
  0% {
    background: linear-gradient(0.84turn, #094059, #ebf8e1, #96836e);
  }

  5% {
    background: linear-gradient(0.88turn, #114d69, #ebf8e1, #b79978);
  }

  10% {
    background: linear-gradient(0.93turn, #235a74, #ebf8e1, #bc8c58);
  }

  15% {
    background: linear-gradient(0.95turn, #4184a4, #ebf8e1, #e18826);
  }

  20% {
    background: linear-gradient(0.99turn, #5b96b3, #ebf8e1, #e14326);
  }

  25% {
    background: linear-gradient(0.02turn, #80a6b9, #ebf8e1, #f30000);
  }

  30% {
    background: linear-gradient(0.06turn, #aec7d3, #ebf8e1, #e41111);
  }

  35% {
    background: linear-gradient(0.10turn, #aec7d3, #ebf8e1, #e41111);
  }

  40% {
    background: linear-gradient(0.14turn, #aec7d3, #ebf8e1, #e41111);
  }

  45% {
    background: linear-gradient(0.19turn, #6b93a6, #ebf8e1, #b62a2a)
  }

  50% {
    background: linear-gradient(0.22turn, #5b7a89, #ebf8e1, #c33737);
  }

  55% {
    background: linear-gradient(0.27turn, #355361, #ebf8e1, #b35151);
  }

  60% {
    background: linear-gradient(0.30turn, #1d323c, #ebf8e1, #7e3838);
  }

  65% {
    background: linear-gradient(0.36turn, #164257, #ebf8e1, #743737);
  }

  70% {
    background: linear-gradient(0.40turn, #1a3947, #c1e0a9, #743737);
  }

  75% {
    background: linear-gradient(0.42turn, #24556a, #99b980, #451e1e);
  }

  80% {
    background: linear-gradient(0.45turn, #24556a, #99b980, #451e1e);
  }

  85% {
    background: linear-gradient(0.47turn, #24556a, #99b980, #451e1e);
  }

  90% {
    background: linear-gradient(0.50turn, #193d4c, #99b980, #140707);
  }

  95% {
    background: linear-gradient(0.55turn, #193d4c, #6b8457, #140707);
  }

  100% {
    background: linear-gradient(0.58turn, #193d4c, #5a7742, #140707);
  }
}

/* 动态配色参考 */
/* https://zhuanlan.zhihu.com/p/536889645?utm_id=0 */
#app>div {
  min-height: calc(100vh - 75px);
  /* 背景渐变色 - 原理2 */
  /* background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); */
  /* 背景尺寸 - 原理3 */
  background-size: 600% 600%;
  /* background: #6ea4e6; */
  /* 189 214 76 */
  /* background-image: linear-gradient(transparent, rgba(210, 232, 162, 0.7)); */
  /* background-image: linear-gradient(317deg, #6ea4e6, rgba(210, 232, 162, 0.7) 70.71%); */

  /* 太阳出来的衍射 */
  background: linear-gradient(0.84turn, #3f87a6, #ebf8e1, #f69d3c);
  /* background: linear-gradient(0.58turn, #193d4c, #5a7742, #140707) */
  /* 循环动画 - 原理4 */
  animation: gradientBG 55s ease infinite;
}

div.jc-footer {
  flex: 0 0 auto;
  color: rgb(104, 101, 101);
}

div.jc-footer p {
  text-align: center;
}
</style>